<template>
    <view>
		<view class="search">
			<view class="search_input">
					<view class="iconfont icon-paiqi"></view>
					<input class="uni_input" focus placeholder="搜索用户姓名/电话" placeholder-class="placeholderClass" />
			</view>
			<view class="search_text">
				<view class="search_name">
					<view>姓名</view>
					<view class="iconfont icon-shangxiajiantou"></view>
				</view>
				<view class="search_phone">
					<view>电话</view><view class="iconfont icon-shangxiajiantou"></view>
				</view>
			</view>
		</view>
		<view class="sort">
			<view class="sort_title" v-for="(items, key) in sortData" :key="key">
				<view class="sort_text">{{items.name}}</view>
				<view class="iconfont icon-arrow-down"></view>
			</view>
		</view>
		<navigator url="detail/detail">
			<view class="content">
				<view class="content_list" v-for="(items, index) in nameData" :key="index">
					<view class="content_top">
						<view class="content_img">
							<image src="../../../static/homeimg/avatar.png"></image>
						</view>
						<view class="content_top_text">
							<view class="con_name">
							{{items.name}}
							</view>
							<view class="line"></view>
							<view class="con_alias">{{items.alias}}</view>
						</view>
						<view class="phone">
							<view class="iconfont icon-paiqi">
							</view>
						</view>
					</view>
					<view class="content_footer">
						<block>
							<view class="content_footer_tag">
								<view class="tags" v-for="(citem, ckey) in items.tag" :key="ckey">
									{{citem}}
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</navigator>
		<view class="placeholder"></view>
		<navigator url="tianjia/tianjia">
			<view class="add">
				<view class="add_text">添加人员</view>
			</view>
		</navigator>
    </view>
</template>

<script>
	export default {
    data() {
        return {
            title: 'input',
            focus: false,
            inputValue: '',
            changeValue: '',
			nameData: [
				{name:'李明',alias:'李师傅',tag:['市场销售','设计师','项目经理','材料员','水电工','店长']},
				{name:'张青',alias:'张师傅',tag:['市场销售','设计师']},
				{name:'王丽',alias:'王师傅',tag:['市场']}
			],
			sortData: [
				{name:'在职人员'},
				{name:'全部职位'},
				{name:'全部项目'}
			]
        }
    },
    methods: {
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.search{
		height: 88upx;
		width: 100%;
		display: flex;
		.search_input{
			margin-left: 32upx;
			margin-top: 14upx;
			height: 60upx;
			width: 461upx;
			border-radius: 10upx;
			background:rgba(240,240,240,1);
			display: flex;
			.iconfont{
				align-self: center;
				margin-left: 21upx;
				
			}
			input{
				height: 60upx;
				line-height: 60upx;
				color: #666666;
				font-size: 24upx;
				margin-left: 18upx;
				.placeholderClass{
					
				}
			}
		}
		.search_text{
			height: 88upx;
			line-height: 88upx;
			margin-left: 37upx;
			color: #666666;
			font-size: 24upx;
			display: flex;
			text-align: center;
			.search_name{
				display: flex;
				.iconfont{
					height: 10upx;
					width: 20upx;
				}
			}
			.search_phone{
				display: flex;
				margin-left: 40upx;
			}
		}
	}
	.sort{
		width: 100%;
		height: 63upx;
		line-height: 63upx;
		background-color: #f0f0f0;
		border-top: 1px solid #cccccc;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 30upx;
		.sort_title{
			display: flex;
			.sort_text{
				color: #666666;
				
			}
			.iconfont{
				margin-left: 8upx;
			}
		}
	}
	.content{
		width: 100%;
		background-color: #f5f5f5;
		.content_list{
			width: 100%;
			margin-bottom: 20upx;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			.content_top{
				width: 100%;
				height: 88upx;
				margin-top: 36upx;
				display: flex;
				.content_img{
					width: 88upx;
					height: 88upx;
					margin-left: 30upx;
					border-radius: 50%;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.content_top_text{
					height: 88upx;
					line-height: 88upx;
					display: flex;
					.con_name{
						text-align: center;
						font-size: 36upx;
						margin-right: 14upx;
						margin-left: 21upx;
					}
					.line{
						width: 2upx;
						height:30upx;
						 background-color: rgba(51,51,51,1);
						 margin-top: 32upx;
						 display: flex;
						 align-items:flex-end; 
					}
					.con_alias{
						color: #666666;
						font-size: 24upx;
						margin-left: 15upx;
						
					}
				}
				.phone{
					margin-left: auto;
					margin-right: 34upx;
					margin-top: 10upx;
					width: 66upx;
					height: 66upx;
					border-radius: 50%;
					background-color: #1b82d1;
					color: #ffffff;
					.iconfont{
						text-align: center;
						height: 66upx;
						line-height: 66upx;
					}
				}
			}
			.content_footer{
				margin-top: 6upx;
				width: 100%;
				padding-bottom: 20upx;
				.content_footer_tag{
					margin-left: 130upx;
					margin-right: 20upx;
					.tags{
						display: inline-block;
						text-align: center;
						width: 136upx;
						height: 50upx;
						line-height: 50upx;
						margin: 0 10upx 10upx 0;
						border: 1px solid rgba(27,130,209,1);
						border-radius: 10upx;
						color: rgba(27,130,209,1);
						font-size: 28upx;
					}
				}
			}
			
		}
		
	}
	.add{
		position: fixed;
		width: 100%;
		height: 88upx;
		bottom: 0;
		background-color: #1b82d1;
		color: #ffffff;
		line-height: 60upx;
		text-align: center;
		line-height: 88upx;
	}
	.placeholder{
		width: 100%;
		height: 80upx;
	}
</style>
